<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <form th:replace="common/css-js :: common-css"></form>
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }
        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>

<form th:replace="common/bar :: navbar"></form>
<div th:replace="common/bar ::sidebar(activeUrl='query')"></div>

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" th:object="${page}">
    <h2 class="text-center">学生列表</h2>
    <br/>
    <div class="row">
        <a class="btn btn-primary btn-sm offset-md-1" href="#" id="add" >添加</a>

    </div>
     <div style="margin-left:70%;">
         <form class="form-inline" th:action="@{/query}" method="get">
                <div class="form-group">
                 <label for="inputPassword2" class="sr-only">Password</label>
                 <input type="text" class="form-control" id="inputPassword2" placeholder="请输入姓名"   name="studentName">
                </div>
                <button type="submit" class="btn btn-primary mb-2">查询</button>
          </form>
<!--         <button href="#"  class="btn btn-sm btn-primary update_btn" id="select">搜索</button>-->
     </div>.
    <div class="table-responsive">
        <table class="table table-striped table-sm">
            <tr>
                <th>#</th>
                <th>Id</th>
                <th>Name</th>
                <th>className</th>
                <th>age</th>
                <th>Gender</th>
                <th>Birth</th>
                <th>操作</th>
            </tr>

            <tr th:each="s,stat:*{records}">
                <td th:text="${stat.count}"></td>
                <td th:text="${s.studentId}"></td>
                <td th:text="${s.studentName}"></td>
                <td th:text="${s.lass.className}"></td>
                <td th:text="${s.studentAge}"></td>
                <td th:text="${s.studentGerder==0?'男':'女'}"></td>
                <td th:text="${#dates.format(s.studentDate,'yyyy-MM-dd')}"></td>
                <td>
                    <button href="#"  class="btn btn-sm btn-primary update_btn"
                       th:attr="update_url=|@{/student/}${s.studentId}|">修改</button>
                    <!--									   th:href="|@{/employee/}${employee.employeeId}|">修改</a>-->
                    <!--									<button class="btn btn-sm btn-danger" id="delete"  th:href="|@{/employee/}${employee.employeeId}|">删除</button>-->
                    <button class="btn btn-sm btn-danger del_btn"
                            th:attr="del_url=|@{/delete/}${s.studentId}|">删除
                    </button>
                </td>
            </tr>

        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${studentName ==null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                        th:href="@{/query(current=1)}">首页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${studentName !=null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/query(current=1,studentName=${studentName})}">首页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${studentName ==null}">
                    <a class="page-link" href="#" tabindex="-1"
                          th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/query(current=*{current}-1)}">上一页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${studentName !=null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/query(current=*{current}-1,studentName=${studentName})}">上一页</a>
                </li>

                <li class="page-item" th:each="pageNum:${pageNums}"
                    th:class="${pageNum}==*{current}?'page-item active':'pageitem'" th:if="${studentName ==null}">
                    <a class="page-link"
                       th:href="${pageNum}==*{current}?'javascript:void(0);':@{/query(current=${pageNum})}"
                       th:tabindex="${pageNum}==*{current}?'-1'">
                        [[${pageNum}]]
                        <span class="sr-only" th:if="${pageNum}==*{current}">
(current)</span>
                    </a>
                </li>
                <li class="page-item" th:each="pageNum:${pageNums}"
                    th:class="${pageNum}==*{current}?'page-item active':'pageitem'" th:if="${studentName !=null}">
                    <a class="page-link"
                       th:href="${pageNum}==*{current}?'javascript:void(0);':@{/query(current=${pageNum},studentName=${studentName})}"
                       th:tabindex="${pageNum}==*{current}?'-1'">
                        [[${pageNum}]]
                        <span class="sr-only" th:if="${pageNum}==*{current}">
(current)</span>
                    </a>
                </li>
    <li class="page-item" th:class="*{hasNext()}?'page-item':'pageitem disabled'" th:if="${studentName ==null}">
        <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:href="@{/query(current=*{current}+1)}">下一页</a>

                </li>
                <li class="page-item" th:class="*{hasNext()}?'page-item':'pageitem disabled'" th:if="${studentName !=null}">
<!--                    <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:href="@{/query?studentName=(current=*{current}+1)}">下一页</a>-->
                    <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:href="@{/query(current=*{current}+1,studentName=${studentName})}">下一页</a>
                </li>

                <li class="page-item disabled" th:class="*{hasNext()}?'pageitem':'page-item disabled'" th:if="${studentName ==null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/query(current=*{pages})}">尾页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasNext()}?'pageitem':'page-item disabled'" th:if="${studentName !=null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/query(current=*{pages},studentName=${studentName})}">尾页</a>
                </li>
            </ul>
        </nav>


    </div>

    <form id="delete_form" method="post">
        <input type="hidden" name="_method" value="DELETE">
    </form>
</main>
<div th:if="${#lists.isEmpty(page.records)}">
    <h2>暂无数据</h2>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <!-- 此处设置id属性及thymeleaf片段，用于加载后端的域数据 -->
        <div class="modal-content" id="addOrUpdate" th:fragment="addOrUpdate" style="margin-top: 15%">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel"
                    th:text="${student!=null}?'员工修改页':'员工添加页'">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form th:action="@{/student}"  id="updateForm">
                    <input type="hidden" name="studentId" th:if="${student!=null}" th:value="${student.studentId}">
                    <div class="form-group">
                        <label for="studentName">Name</label>
                        <input type="text" class="form-control" id="studentName"
                               placeholder="lisi"  name="studentName" th:value="${student!=null}?${student.studentName}">
                        <!-- <input type="text" class="form-control" id="employeeName"
                                placeholder="lisi" name="employeeName">-->
                    </div>
                    <div class="form-group">
                        <label for="studentAge">age</label>
                        <input type="email" class="form-control" id="studentAge" name="studentAge"
                               placeholder="" th:value="${student!=null}?${student.studentAge}">

                    </div>
                    <div class="form-group">
                        <label>Gender</label><br/>
                        <div class="form-check form-check-inline">
                            <input  class="form-check-input" type="radio" name="studentGerder"
                                    id="male" value="0" checked   th:checked="${student!=null}?${student.studentGerder==0}:true">
                            <!--   <input class="form-check-input" type="radio"
                                      id="male" value="0" checked name="employeeGender">-->
                            <label class="form-check-label" for="male" > 男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input   class="form-check-input" type="radio" name="studentGerder"
                                     id="female" value="1"  th:checked="${student!=null}?${student.studentGerder==1}">
                            <!-- <input class="form-check-input" type="radio"
                                    id="female" value="1"  name="employeeGender">-->
                            <label class="form-check-label" for="female">女</label>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="studentDate">Birth</label>
                        <input type="date" class="form-control" id="studentDate" name="studentDate" th:value="${student!=null}?${#dates.format(student.getStudentDate(),'yyyy-MM-dd')}">

                        <!--             <input type="date" class="form-control" id="employeeBirth" name="employeeBirth">-->
                    </div>
                    <div class="form-group">
                        <label for="bans">bans</label>
                        <select class="form-control" id="bans" name="classId" style="height: 50px">
                            <option th:each="ban:${bans}"
                                    th:text="${ban.className}"
                                    th:value="${ban.classId}"
                                    th:selected="${studnent!=null}?${studnent.classId==ban.classId}"></option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="update" th:text="${student!=null}?'修改':'添加'">Save changes</button>

                    </div>
                </form>
            </div>

        </div>
    </div>

</div>

<form th:replace="common/css-js ::common-js"></form>
<script>
    feather.replace()
</script>
<script>

</script>
<script th:inline="javascript">
    let add_url=/*[[@{/toadd}]]*/;
   let list_url=/*[[@{/query}]]*/;
  let se_url=/*[[@{/like}]]*/

      $("table").on("click", ".del_btn", function () {
          console.log("dfdf")
          let url = $(this).attr("del_url");
          console.log(url)
          // $("#delete_form").attr("action", url).submit()
          $.ajax({
              url:url,
              type:"delete",
              dataType:"json",
              success:function (res){
                if (res){
                    alert(res?"成功":"失败")
                }

                  location.href = list_url;
              }
          })

      })

        $("#add").on("click",function () {
                 // console.log("hell")
            $("#addOrUpdate").load(add_url+" #addOrUpdate",function () {
                $("#myModal").modal({
                    keyboard: false,
                    backdrop: 'static',
                    show: true
                })
            })
    })


    $("body").on("click","#update",function () {
        // let word = $("[name='_method']").val()=='PUT'?'修改':'添加';
        $.ajax({
            url:$("#updateForm").attr("action"),
            type:"post",
            data:$("#updateForm").serialize(),
            // dataType:"json",
            success:function (res){
                alert( res);
                location.href = list_url;

            }
        })
    })

    $("table").on("click",".update_btn",function () {
        $("#addOrUpdate").load($(this).attr("update_url")+ "#addOrUpdate",function () {
            $("#myModal").modal({
                keyboard: false,
                backdrop:'static',
                show:true
            })
        });
    })


</script>
</body>
</html>